<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue v-model 绑定checkbox</title>
    <link rel="stylesheet" href="./css/global.css">
</head>

<body>
    <div id="app">
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-for='msg in messages'>{{msg}}</li>
            </ul>
        </div>

        <div>
            <!-- value的值是写死的 -->
            请选择您喜欢的球类运动（多选）：
            <input type="checkbox" name='balls' value='足球' v-model='hobbies'>足球
            <input type="checkbox" name='balls' value='篮球' v-model='hobbies'>篮球
            <input type="checkbox" name='balls' value='网球' v-model='hobbies'>网球
            <input type="checkbox" name='balls' value='棒球' v-model='hobbies'>棒球
            <h2>你选择的爱好有：{{hobbies}}</h2>
        </div>

        <div>
            <!-- 动态值绑定 -->
            请选择您喜欢的球类运动（多选）：
            <label v-for="(item,index) in originHobbies" :for='index+item'>
                <input type="checkbox" name="balls" :id="index+item" :value="item" v-model='hobbies'>{{item}}
            </label>
            <h2>你选择的爱好有：{{hobbies}}</h2>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                title: 'v-model 动态值绑定',
                messages: [
                    `label 加 input[checkbox|select] 配套使用的好处是，通过 [label for id] 的映射，
                    点击对应的 label 文本会改变映射的 input 的选中状态`,
                    `真实开发环境中，input[checkbox|select] 的值可能是从服务器的data中获取的，
                    所以需要通过 v-bind:value 动态的给 value 绑定值`,
                    `checkbox 的 name 用于后台获取数据分组用，还是要加的`,
                ],
                isAgree: false,
                hobbies: [],
                originHobbies:['篮球', '足球','网球','棒球']
            },
            computed: {
            },
            methods: {
            }
        });
    </script>
</body>

</html>